<template>
    <div class="logo-wrap no-select">
        <a-tooltip :defaultVisible="tip" v-if="tip">
            <template #title>点我试试</template>
            <img class="logo-img radius" :src="website.logo" alt="logo" @click="logoClick"/>
        </a-tooltip>
        <img class="logo-img radius" :src="website.logo" alt="logo" @click="logoClick" v-else/>
    </div>
</template>

<script>
    import website from "/src/config/website";
    export default {
        name: "Logo",
        components: {},
        props: ['tip'],
        data() {
            return {
                website: website,
            }
        },
        methods: {
            // logo点击
            logoClick() {
                this.$emit('logoClick');
            },
        }
    }
</script>

<style lang="less" scoped>
    .logo-wrap {
        text-align: center;
        margin: 40px auto 0 auto;
        font-size: 0;

        .logo-img {
            display: inline-block;
            width: 100px;
            height: 100px;
            cursor: pointer;
            transition: all .2s;

            &:hover {
                cursor: pointer;
                transform: translateY(-2px);
                -webkit-transform: translateY(-2px);
                -moz-transform: translateY(-2px);
            }
        }
    }

    @media screen and (max-width: 800px) {
        .logo-wrap {
            margin: 10px auto;
        }
    }
</style>